<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>东单办公系统-部门修改</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="media/layui/css/layui.css" media="all">
    <script type="text/javascript" src="media/js/jquery.min.js"></script>
    <script src="media/layui/layui.js"></script>
    <script type="text/javascript">
        var obj;
        var form;
        var request= {
            getUrlParam: function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg); //匹配目标参数
                if (r != null) return unescape(r[2]);
                return null; //返回参数值
            },
        }
        $(function () {
            var a = request.getUrlParam("d")
            var b = JSON.parse(unescape(a));


            console.log(a)
            console.log(b)
            // var json = getData();
            // obj = JSON.parse(decodeURI(json));
            showData(b);

        })



        function showData(obj) {
            $("#f1").val(obj.u_no);
            $("#f2").val(obj.name);
            $("#f3").val(obj.d_id);
            //initData(obj);
            $("#f4").val(obj.sex);
            $("#f6").val(obj.email);
            $("#f7").val(obj.phone);
            $("#f8").val(obj.qq);
            $("#f9").val(obj.entryTime);
            $("#ylimg").attr("src", obj.heading);
            $("#f11").val(obj.heading);
            $("#id").val(obj.id);
        }

        function initData(obj) {
            $.get("departall.do", null, function (arr) {

                for (i = 0; i < arr.length; i++) {
                    if (arr[i].id == obj.d_id) {
                        $("#f3").append(
                            "<option value='" + arr[i].id + "'>" + arr[i].name
                            + "</option>");
                    }
                }
                for (i = 0; i < arr.length; i++) {
                    if (arr[i].id != obj.d_id) {
                        $("#f3").append(
                            "<option value='" + arr[i].id + "'>" + arr[i].name
                            + "</option>");
                    }
                }
                form.render("select");
            });
        }
    </script>
</head>
<body>

<div class="layui-container" style="margin-top: 5px">
    <!--    action="staffupdate.do"-->
    <form class="layui-form"  method="post">
        <input type="hidden" name="id" id="id">
        <div class="layui-form-item">
            <label class="layui-form-label">工号</label>
            <div class="layui-input-block">
                <input type="text" name="u_no" readonly="readonly" autocomplete="off"
                       class="layui-input" id="f1">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">员工姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="require"
                       autocomplete="off" class="layui-input" id="f2">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属部门</label>
            <div class="layui-input-block">
                <input type="text" name="d_id" lay-verify="require"
                       autocomplete="off" class="layui-input" id="f3">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="text" name="sex" lay-verify="require"
                       autocomplete="off" readonly="readonly" class="layui-input" id="f4">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" lay-verify="require"
                       autocomplete="off" class="layui-input" id="f6">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="phone" lay-verify="require"
                       autocomplete="off" class="layui-input" id="f7">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">QQ</label>
            <div class="layui-input-block">
                <input type="text" name="qq" lay-verify="require"
                       autocomplete="off" class="layui-input" id="f8">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">入职日期</label>
            <div class="layui-input-block">
                <input type="date" name="entrytime" readonly="readonly" id="f9"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">

            <label class="layui-form-label">照片</label> <img alt="图片预览"
                                                            id="ylimg" src="" width="200px" height="200px"/>
            <button type="button" class="layui-btn" id="upfile">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <input type="hidden" name="heading" id="f11"
                   onchange="yl(this,'ylimg')" style="display: none"/>
        </div>


        <div class="layui-form-item">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="btnUpload">立即提交</button>
        </div>
    </form>
</div>
<script type="text/javascript">
    //预览图片,参数说明：第一个参数：要预览的file对象，第二个参数：预览的img标签的id名称
    function yl(obj, id) {
        //FileReader
        if (window.FileReader) {//验证当前的浏览器是否支持图片预览
            var reader = new FileReader();
            var file = obj.files[0];
            var regexImage = /^image\//;//js正则表达式，匹配是否拥有image
            if (regexImage.test(file.type)) {
                //设置读取结束的回调函数
                reader.onload = function (data) {
                    var img = document.getElementById(id);
                    img.src = data.target.result;//将结果数据显示到img标签上

                };
                //开始读取上传的文件内容
                reader.readAsDataURL(file);
            } else {
                alert("亲，看清楚是图片预览");

            }
        } else {
            alert("亲，浏览器该升级了");


        }
    }

    layui.use(['form', 'upload', 'layedit', 'laydate'], function () {
        form = layui.form, layer = layui.layer, layedit = layui.layedit,
            laydate = layui.laydate,$ = layui.jquery;
        var upload = layui.upload;



        //执行实例
        var uploadInst = upload.render({
            elem: '#upfile' //绑定元素
            ,
            auto:false
            ,
            url: "updatebydid.do?" //上传接口
            ,
            bindAction:'#btnUpload'
            ,

            before:function(){

                this.data = {"name": $('input[name="name"]').val(),  "email": $('input[name="email"]').val(), "phone": $('input[name="phone"]').val(), "qq": $('input[name="qq"]').val(), "id": $('input[name=id]').val(), "d_id": $('input[name="d_id"]').val()}


            },
            done: function (obj) {
                //上传完毕回调
                console.log(obj);
                if (obj.code == 1000) {

                    $("#ylimg")[0].src =  obj.data;
                    //$("#btn1").attr("disabled", false);
                } else {
                    $("#ylimg")[0].src = "https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1599653819&t=7953ef89121f3e2a81ba8c4cc4c4893d";
                }

            },
            error: function () {
                //请求异常回调
            }
        });


        //日期
        laydate.render({
            elem: '#date'
        });
        initData(obj);
    });
</script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

</body>
</html>